<template>
    <el-container class="heightLimit">
        <el-header class="header">
            <img class="logo" src="https://sso.yunshanmeicai.com/images/logo.png">
            <div >
                <div class="title">直播管理平台</div>
                <div class="menu">
                    <el-menu :default-active="activeIndex" :router="true" mode="horizontal"
                        background-color="#353F4E"
                        text-color="#8A9096"
                        active-text-color="#FFFFFF">
                        
                        <template v-for="(menu,index) in menuList">
                            <el-menu-item v-if="!menu.subMenu" :index="menu.href" :key="index" >{{menu.text}}</el-menu-item>
                            <el-submenu v-if="menu.subMenu" :index="menu.href" :key="index">    
                                <template slot="title">{{menu.text}}</template>   
                                <el-menu-item  v-for="(child,index) in menu.subMenu" :index="''" :key="index">
                                  <el-menu-item v-if="!child.subMenu" :index="child.href" :key="index" >{{child.text}}</el-menu-item>
                                  <el-submenu v-if="child.subMenu" :index="child.href" :key="index">    
                                    <template slot="title"> {{child.text}} </template>
                                      <el-menu-item  v-for="(childMin,index) in child.subMenu" :index="''" :key="index">
                                        <el-menu-item v-if="!childMin.subMenu" :index="childMin.href" :key="index" >{{childMin.text}}</el-menu-item>
                                          <el-submenu v-if="childMin.subMenu" :index="childMin.href" :key="index">    
                                            <template slot="title"> {{childMin.text}}</template>
                                             <el-menu-item v-for="(childs,index) in childMin.subMenu" :index="childs.href" :key="index">{{childs.text}}</el-menu-item>

                                          </el-submenu>
                                      </el-menu-item>
                                  </el-submenu> 
                                </el-menu-item>
                            </el-submenu>
                        </template>
                    </el-menu>
                </div>
            </div>
            
            <div class="right-menu">
                <span class="username">{{ username }}</span>
                <span class="logout"><a href="javascript:;" onclick="window.location.href=getLogoutHttpUrl();">退出</a></span>
            </div>
        </el-header>
       
        <el-main class="el-main">
         <router-view></router-view>
        </el-main>
    </el-container>
</template>
<script>
import { menuAPI } from "@/api/index";
export default {
  data() {
    return {
      uid: this.$root.uid,
      email: this.$root.email,
      username: this.$root.username,
      rolename: this.$root.rolename,
      activeIndex: this.$route.path,
      menuList: [],
    };
  },
  watch: {
    $route: function() {
      this.activeIndex = this.$route.path;
      //特殊处理（当监听到的不是下拉菜单对应的路由时，需重新激活所选界面对应的路由）
       if (this.$route.path == "/") {
          this.$nextTick(() => { this.activeIndex = "/";}); //首页
       } else if (this.$route.path == "/createLiveVideo" || this.$route.path == "/liveVideoDetail") {
        this.$nextTick(() => { this.activeIndex = "/liveVideoList";});//采购申请
      }
    }
  },
  mounted() {
    this.getAllMenu();
    __punch.to(this.username + this.email);
  },
  methods: {
    getAllMenu() {
      menuAPI.getAllMenu({}, data => {
        if (data) {
          this.menuList = data;
          if (this.$route.path == "/") {
            //设置默认选中第一个菜单
            this.$nextTick(() => {
              this.$router.push({ path: '/' });
            });
          }
          //特殊处理（当重载或刷新的界面不是下拉菜单对应的路由时，需重新激活所选界面对应的路由）
          if (this.$route.path == "/createLiveVideo" || this.$route.path == "/liveVideoDetail") {
            this.$nextTick(() => { this.activeIndex = "/liveVideoList";});//采购申请
          }
        }
      });
    }
  }
};
</script>
<style>
html,
body {
  height: 100%;
  width: 100%;
}
.heightLimit {
  position:absolute;
  width:100%;
  min-height:100%;
  top:0;
}
.right-dialog {
  position: fixed;
  right: 0px;
  height: 100%;
  overflow: hidden;
  z-index: 999;
  top: 0px !important;
}
.right-dialog .el-dialog {
  transform: translateX(0);
  height: 100%;
  top: 0px !important;
  margin-bottom: 0px;
  overflow: auto;
  right: 0px;
  left: auto;
  min-width: 650px;
}
.right-dialog .el-dialog .el-dialog__body {
  padding: 10px 20px;
}
.right-dialog .el-dialog .el-dialog__footer {
  margin-top: -10px;
}
.el-table .cell,
.el-table th > div {
  padding-left: 5px;
  padding-right: 5px;
  box-sizing: border-box;
  text-overflow: ellipsis;
  background: transparent !important;
}
.el-form-item__label {
  font-weight: bold;
}
.header {
  background: #353f4e;
  height: 55px;
  position: relative;
}
.header .logo {
  width: 60px;
  height: 26px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.header .title {
  float: left;
  font-family: PingFangSC-Regular;
  font-size: 20px;
  color: #ffffff;
  width: 150px;
  height: 28px;
  position: absolute;
  top: 50%;
  margin-left: 80px;
  transform: translateY(-50%);
}
.header .menu {
  float: left;
  margin-left: 230px;
}
.header .right-menu {
  float: right;
  width: 100px;
}
.header .username {
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: #ffffff;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.header .logout {
  font-family: PingFangSC-Regular;
  font-size: 14px;
  color: #ffffff;
  position: absolute;
  top: 50%;
  margin-left: 60px;
  transform: translateY(-50%);
}
.header .logout a {
  color: #fff;
  text-decoration: none;
}
.el-table__header th {
  background-color: #eff2f7;
}

.el-table th,
.el-table td {
  text-align: center;
}
.el-table,
.el-table__expanded-cell {
  background-color: transparent !important;
}
.el-table tr {
  background-color: transparent !important;
}
.el-tabs__nav {
  margin-left: 20px;
}

.el-tabs__content {
  height: calc(100% - 56px);
}

.el-tab-pane {
  height: 100%;
}
.el-main {
  overflow:hidden;
  min-height:200px;
  margin-bottom: 187px;
}

/* 弹窗 */
.el-dialog__header {
  height: 38px !important;
  padding: 15px 20px 0px 20px !important;
  background-color: #f3f3f3 !important;
}
.el-dialog__title {
  font-size: 16px !important;
  color: #333 !important;
  font-weight: 500 !important;
}
.el-dialog__headerbtn .el-dialog__close {
  color: #333 !important;
}
</style>
